<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../static/shopMember/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../static/css/thesame.css" media="all">
	<link rel="stylesheet" href="../static/shopMember/css/page.css" media="all">
	<link rel="stylesheet" href="../static/shopMember/css/rightCon.css" media="all">
	<link rel="stylesheet" href="../static/shopMember/css/tree.css" media="all">
	<link rel="stylesheet" href="../static/shopMember/css/popCss.css" media="all">
</head>

<body class="layui-layout-body">
	<div class="layui-body">
		<div class="crumbs-nav f14px pad16px">
			<span class="current">基础数据</span>
		</div>
		<div class="layui-box-con">
			<input type="hidden" id="parentCode" value="">
			<div class="layui-left-con">
				<div class="border-radius4 bgWhite box-shadows">
					<nav class="label-nav-con">
						<div class="f16px fb"><img src="../static/shopMember/img/icon_label.png">标签类别</div>
						<ul class="lh40px textCenter">
							<li th:each="label,labelStat:${labelType}" th:class="${labelStat.first}?'current':''" th:attr="data-id=${label.id}"  th:value="${label.id}" th:text="${label.labelName}"></li>
						</ul>
					</nav>
				</div>
			</div>
			<div class="layui-right-con">
				<div class="pad16px border-radius4 bgWhite">
					<div class="new-data-btn mb16px lh30px overflow">
						<p class="left"><span onclick="addLayerOpen()" class="white border-radius4 bgBlue inline-block cursor"><img src="../static/shopMember/img/button_add.png">新建</span></p>
						<p class="right"><span class="block">共<em class="red" id="totalNum">0</em>条数据</span></p>
					</div>
					<div>
						<table class="layui-hide" id="test" lay-filter="test"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="pop-add" style="display: none;">
		<div class="pop-up">
			<p class="pop-title-top"><span>新建</span><span class="pop-close right"><img src="../static/shopMember/img/icon_close.png"></span></p>
			<div class="pad24px">
				<div class="add-mess pop-add-mess form-style">
					<div class="add-mess-child">
						<div style="width: 50px;">
							<label><em class="red">*</em>名称：</label>
						</div>
						<p style="margin-left: 50px;"><input id="addLabelName" maxlength="20" type="text" placeholder="请输入"></p>
					</div>
				</div>
				<div class="btn-con btn-con-margin textRight lh32px mt20px">
					<span class="btn-compile" onclick="add()">确&nbsp;定</span>
					<span class="btn-cancel">取&nbsp;消</span>
				</div>
			</div>
		</div>
	</div>
	<div id="pop-update" style="display: none;">
		<div class="pop-up">
			<p class="pop-title-top"><span>修改</span><span class="pop-close right"><img src="../static/shopMember/img/icon_close.png"></span></p>
			<div class="pad24px">
				<div class="add-mess pop-add-mess form-style">
					<div class="add-mess-child">
						<div style="width: 50px;">
							<label><em class="red">*</em>名称：</label>
						</div>
						<input id="updateLabelCode" type="hidden"/>
						<p style="margin-left: 50px;"><input id="updateLabelName" maxlength="20" type="text" placeholder="请输入"></p>
					</div>
				</div>
				<div class="btn-con btn-con-margin textRight lh32px mt20px">
					<span class="btn-compile" onclick="update()">确&nbsp;定</span>
					<span class="btn-cancel">取&nbsp;消</span>
				</div>
			</div>
		</div>
	</div>
	<div id="pop-delete" style="display: none">
		<div class="pop-up">
			<!-- 删除 -->
			<div class="delete-con">
				<input id="deleteLabelCode" type="hidden"/>
				<p class="bgBlue lh40px f16px white" style="padding-left: 32px;">提示</p>
				<div>
					<div><img src="../static/shopMember/img/icon_hint_delete.png">您确定要删除这条数据吗？</div>
				</div>
				<div class="btn-con btn-con-margin textRight lh30px">
					<span class="btn-compile" onclick="del()">确&nbsp;定</span>
					<span class="btn-cancel">取&nbsp;消</span>
				</div>
			</div>
		</div>
	</div>
	<div id="pop-deal" style="display: none">
		<div class="pop-up">
			<!-- 删除 -->
			<div class="delete-con">
				<input id="dealLabelCode" type="hidden"/>
				<input id="dealState" type="hidden"/>
				<p class="bgBlue lh40px f16px white" style="padding-left: 32px;">提示</p>
				<div>
					<div><img src="../static/shopMember/img/icon_hint_delete.png">您确定要<em id="dealText"></em>这条数据吗？</div>
				</div>
				<div class="btn-con btn-con-margin textRight lh30px">
					<span class="btn-compile" onclick="dealLabel()">确&nbsp;定</span>
					<span class="btn-cancel">取&nbsp;消</span>
				</div>
			</div>
		</div>
	</div>
<script src="../static/js/jquery-3.1.1.min.js"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<script>
	//获取列表
	function getlabelList(labelCode){
			//左侧菜单栏
			layui.use(['table'], function() {
				var table = layui.table;

				//第一个实例
				table.render({
					elem: '#test'//,url: '/demo/table/user/'
					,url:"../label/getLabelListByLabelCodePagination"
					,where: {"labelCode":labelCode}
					,request: {
						pageName: 'currentPage' //页码的参数名称，默认：page
						,limitName: 'pageSize' //每页数据量的参数名，默认：limit
					}
					//,count: 10  //数据总数，从服务端得到
					//,data: listData
					,page: true //开启分页
					,limit:10 //每页显示的条数
					//,limits:[3,4,5]
					,groups: 9 //连续页码个数
					,parseData:function(res){
						return{
							"code":res.code,
							"data":res.data.data,
							"count":res.data.totalCount,
							"limit":res.data.pageSize,
						};
					}
					,cols: [
						[ //表头
							{
								field: 'id',
								title: '序号',
								fixed: 'left',
								type: 'numbers',
								width: 80,
							}, {
							field: 'labelName',
							title: '标签名称',
							width: 200,
						}, {
							field: 'status',
							title: '状态',
							width:140,
							templet: function(res){
								return res.status==1?"启用":"<font style='color:red;'>禁用</font>";;
							}
						}, {
							field:'preinstall',
							title:'系统预设',
							width:120,
							templet: function(res){
								var preinstall = res.isPreinstall;
								var html = preinstall==1?html = "<img src='"+basePath+"/static/shopMember/img/icon_xtys.png'>":"";
								return html;
							}
						}, {
							field: 'operation',
							title: '操作',
							style: 'color:#1C9399;',
							//fixed: 'right',
							width: 200,
							templet: function(res){
								var html='';
								var text = res.status==1?'禁用':'启用';
								if (res.editable ==2) {
									$("#addBtn").hide();
								}else{
									$("#addBtn").show();
								}

								if (res.isPreinstall ==1) {
									return '';
								}else{
									var append = (res.status==0?'<span class=\'blue\' data-state="'+res.status+'" data-code="'+res.id+'" onclick="dealLayerOpen(this)">启用</span>':'<span class=\'red\' data-state="'+res.status+'" data-code="'+res.id+'" onclick="dealLayerOpen(this)">禁用</span>');
									var html='<div class=\'table-list-btn\'><span onclick="updateLayerOpen(\''+res.id+'\',\''+res.labelName+'\')" class=\'blue\'>编辑</span>|<span onclick="deleteLayerOpen(\''+res.id+'\')" class=\'blue\'>删除</span>|'+append+'</div>';
									return html;
								}
							}
						}
						]
					]
					,done:function(res, curr, count){
						$("#totalNum").text(count);
						//
					}
				});
			});
		}



	$(function(){
		//标签类别切换
		$('.label-nav-con li').click(function() {
			$(this).addClass('current').siblings().removeClass('current');
			//加载列表
			getlabelList($(this).attr("value"));
			setParentCodeValue($(this).attr("value"));
		})

		if ($('.label-nav-con li').length>0) {
			//给第一个加上current
			$('.label-nav-con li')[0].classList.add("current");
			//加载第一个标签类型的列表
			var firstId = $('.label-nav-con li').eq(0).data("id");
			getlabelList(firstId);
			setParentCodeValue(firstId);
		}
	})


	//设置父级标签
	function setParentCodeValue(val){
		$("#parentCode").val(val);
	}

	//弹层 添加
	function addLayerOpen(){
		layer.open({
			type: 1
			,title: false
			,closeBtn: false
			//新建组织
			,area: ['490px','200px']
			,shade: 0.2
			,id: 'payCons'
			,btnAlign: 'c'
			,moveType: 1
			,shadeClose: true
			,content: $("div#pop-add"),
			success:function(){
				//关闭弹层
				$(".pop-close").click(function(){
					layer.closeAll();
				});
				$(".btn-cancel").click(function(){
					layer.closeAll();
				});
			},

		});
	}

	//新增
	function add(){
		var parentCode = $("#parentCode").val();
		var labelName = $("#addLabelName").val();
		if (isNull(labelName)) {
			layer.msg('标签名称不能为空', {time: 2000});
			return;
		}else if(labelName.length>20){
			layer.msg('标签名称过长', {time: 2000});
			return;
		}

		$.ajax({
			url: '../label/saveLabel',
			type: "post",
			dataType: "json",
			data: {parentCode:parentCode,labelName:labelName},
			async: false,
			success: function (data) {
				if (data.code == "200") {
					layer.closeAll();
					layer.msg('新增成功', {time:1500},function(){
						var parentCode = $("#parentCode").val();
						getlabelList(parentCode);
						//清空
						$("#addLabelName").val("");
					});
				} else {
					layer.msg(data.msg);
				}
			}
		});
	}

	//弹层 修改
	function updateLayerOpen(code,name){
		layer.open({
			type: 1
			,title: false
			,closeBtn: false
			//新建组织
			,area: ['490px','200px']
			,shade: 0.2
			,id: 'payCons'
			,btnAlign: 'c'
			,moveType: 1
			,shadeClose: true
			,content: $("div#pop-update"),
			success:function(){
				$("#updateLabelName").val(name);
				$("#updateLabelCode").val(code);
				//关闭弹层
				$(".pop-close").click(function(){
					layer.closeAll();
				});
				$(".btn-cancel").click(function(){
					layer.closeAll();
				});
			},
		});
	}

	//修改
	function update(){
		var parentCode = $("#parentCode").val();
		var labelName = $("#updateLabelName").val();
		var labelCode = $("#updateLabelCode").val();
		if (isNull(labelName)) {
			layer.msg('标签名称不能为空', {time: 2000});
			return;
		}else if(labelName.length>20){
			layer.msg('标签名称过长', {time: 2000});
			return;
		}

		//修改
		$.ajax({
			url: '../label/updateLabel',
			type: "post",
			dataType: "json",
			data: {"parentCode":parentCode,"labelCode":labelCode,"labelName":labelName},
			async: false,
			success: function (data) {
				if (data.code == "200") {
					layer.closeAll();
					layer.msg('修改成功', {time:1500},function(){
						var parentCode = $("#parentCode").val();
						getlabelList(parentCode);
					});
				} else {
					layer.msg(data.msg);
				}
			}
		});
	}

	//弹层 删除
	function deleteLayerOpen(code){
		layer.open({
			type: 1
			,title: false
			,closeBtn: false
			//新建组织
			,area: ['400px','160px']
			,shade: 0.2
			,id: 'payCons'
			,btnAlign: 'c'
			,moveType: 1
			,shadeClose: true
			,content: $("div#pop-delete"),
			success:function(){
				$("#deleteLabelCode").val(code);
				//关闭弹层
				$(".pop-close").click(function(){
					layer.closeAll();
				});
				$(".btn-cancel").click(function(){
					layer.closeAll();
				});
			},
		});
	}
	//确认删除
	function del(){
		var labelCode = $("#deleteLabelCode").val();
		$.ajax({
			url: '../label/deleteLabel',
			type: "post",
			dataType: "json",
			data: {"labelCode":labelCode},
			async: false,
			success: function (data) {
				if (data.code == "200") {
					layer.closeAll();
					layer.msg('删除成功', {time:1500},function(){
						var parentCode = $("#parentCode").val();
						getlabelList(parentCode);
						//清空
						$("#deleteLabelName").val("");
					});
				} else {
					layer.msg(data.msg);
				}
			}
		});

	}


	//处理 删除
	function dealLayerOpen(obj){
		var state = $(obj).data("state");
		var dealState = (state==0?1:0);
		var text = (state==0?'启用':'禁用');
		var code = $(obj).data("code");

		$("#dealText").html(text);
		layer.open({
			type: 1
			,title: false
			,closeBtn: false
			//新建组织
			,area: ['400px','160px']
			,shade: 0.2
			,id: 'payCons'
			,btnAlign: 'c'
			,moveType: 1
			,shadeClose: true
			,content: $("div#pop-deal"),
			success:function(){
				$("#dealLabelCode").val(code);
				$("#dealState").val(dealState);
				//关闭弹层
				$(".pop-close").click(function(){
					layer.closeAll();
				});
				$(".btn-cancel").click(function(){
					layer.closeAll();
				});
			},
		});
	}

	//处理标签）(启动|关闭)
	function dealLabel(){
		var labelCode = $("#dealLabelCode").val();
		var dealState = $("#dealState").val();

		$.ajax({
			url: '../label/updateLabelState',
			type: "post",
			dataType: "json",
			data: {"labelCode":labelCode,"state":dealState},
			async: false,
			success: function (data) {
				var text = (dealState==0?'禁用':'启用');
				if (data.code == "200") {
					layer.closeAll();
					layer.msg(text+'成功', {time:1500},function(){
						var parentCode = $("#parentCode").val();
						getlabelList(parentCode);
					});
				} else {
					layer.msg(text+'失败');
				}
			}
		});
	}


	//是否为空
	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}

</script>
</body>

</html>
